.wh {
    width: 1200px;
    margin: auto;
    display: flex;
    justify-content: space-between;
}

.center {
    text-align: center;
}

.boss {
    box-sizing: border-box;
}
.clearFloat{
    &::after {
        clear: both;
        content: '';
        display: block;
    }
}

//网页顶部导航条
.nav {
    .wh;

    .topbox {
        background-color: #eaeaea;
        height: 30px;
    }

    @w: .welcome;
    @lh: 30px;
    @nvb: .navbar;
    @c: #b3aeae;
    @p: 15px;

    @{w} {
        line-height: @lh;

        span:nth-child(1) {
            font-weight: 700;
        }

        span:nth-child(3) {
            color: @c;
            font-size: @p;
        }

        a {
            padding: 0 5px;
        }

        a:hover {
            color: rgb(19, 183, 243);
        }

    }

    @{nvb} {
        line-height: @lh;

        span {
            color: @c;
            font-size: @p;
        }

        a {
            padding: 0 5px;
        }

        a:hover {
            color: rgb(19, 183, 243);
        }
    }
}

//网页搜索栏
.top_2box {
    .wh;

    img {
        margin: 25px 45px;
        width: 175px;
        height: 56px;
    }

    .search_bar {
        margin-top: 35px;

        input:nth-child(1) {
            .boss;
            width: 490px;
            height: 32px;
            padding: 0 4px;
            border: 3px solid #ea4a36;
            float: left;
        }

        input:nth-child(2) {
            width: 68px;
            height: 32px;
            background-color: #ea4a36;
            color: #fff;
            border: none;
            float: left;
        }
    }

}

//导航条
.tab_bar {
    width: 100%;
    border-bottom: 2px solid #e1251b;

    .tabs {
        .wh;
        .center;
        justify-content: flex-start;

        a {
            display: block;
            font-size: 16px;
            margin: 0 22px;
            line-height: 50px;
            color: #333;

            &:first-child {
                width: 210px;
                background: #e1251b;
                color: #fff;
                font-size: 14px;
                font-weight: 700;
            }

            &:hover {
                font-weight: 700;
            }
        }

    }
}

//内容区
.tr {
    display: flex;
    justify-content: flex-start;
}

.content {
    .wh;
    display: block;
    margin-top: 15px;

    .bar_t {
        font-size: 13px;

        a {
            padding: 9px 5px;
        }

        i {
            padding: 0 5px;
            font-size: 15px;
        }
    }

    .phone {
        margin: 15px 0 15px;
        display: flex;
        justify-content: space-between;

        .apple_png {
            width: 400px;

            .loupe {
                width: 400px;
                height: 400px;
                position: relative;

                .apple_big {
                    width: 100%;
                    height: 100%;
                    border: 1px solid #DFDFDF;
                    position: relative;
                }

                ;

                .trans {
                    width: 200px;
                    height: 200px;
                    position: absolute;
                    background: rgba(255, 255, 255, .5);
                    border: 1px solid #ddd;
                    left: 0;
                    top: 0;
                    display: none;
                }

                .big_app_png {
                    width: 400px;
                    height: 400px;
                    overflow: hidden;
                    position: absolute;
                    left: 420px;
                    top: 0;
                    display: none;

                    img {
                        position: absolute;
                    }
                }


            }


            .apple_ul {
                // .tr;
                margin-top: 5px;
                width: 400px;
                height: 56px;

                input {
                    width: 10px;
                    height: 54px;
                    border: 1px solid #CCC;
                    background: #EBEBEB;
                    float: left;
                }

                .apple_ul_list {
                    width: 372px;
                    float: left;
                    height: 56px;
                    overflow: hidden;
                    margin-left: 5px;

                    ul {
                        width: 2000px;
                        transition: .5s all ease;

                        li {
                            width: 50px;
                            height: 50px;
                            border: 1px solid #CCC;
                            padding: 2px;
                            margin-right: 20px;
                            // flex-shrink: 0;
                            float: left;

                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }


                }
            }

        }

        .apple_m {
            width: 700px;

            p:first-child {
                font-size: 14px;
                margin-top: 15px;
                line-height: 21px;
                font-weight: 900;
            }

            p:nth-child(2) {
                color: #e12228;
                margin-top: 15px;
            }

            .much {
                margin-top: 10px;
                line-height: 28px;
                background: #fee9ec;
                padding: 7px;

                .much1 {
                    .m1 {
                        margin-right: 15px;
                    }

                    .price {
                        display: inline;

                        p {
                            color: #cc1122;
                            display: inline;
                            font-size: 12px;

                            .a {
                                font-size: 16px;
                                vertical-align: middle;
                            }

                            b {
                                font-size: 24px;
                                vertical-align: middle;
                            }
                        }

                        span:last-child {
                            float: right;
                        }
                    }
                }

                .much2 {
                    .m2 {
                        margin-right: 15px;
                        vertical-align: top;
                    }

                    span:last-child {
                        width: 512px;
                        display: inline-block;
                        line-height: 28px;
                        color: #999;

                        strong {
                            background: #c81623;
                            padding: 3px;
                            color: #fff;
                        }
                    }
                }

            }

            .hold_out {
                border-bottom: 1px solid #ededed;
                padding-bottom: 5px;

                .ho {
                    line-height: 28px;
                    margin-top: 10px;
                    font-size: 14px;

                    .mk {
                        margin-right: 15px;
                        color: #333;
                        font-weight: 900;
                    }

                    .mk_text {
                        color: #999;
                        font-weight: 400;
                    }
                }

            }

            ;
            .chooseBox{
                margin-top: 20px;
                .clearFloat;
                span{
                   height: 30px; 
                   line-height: 30px;
                   float: left;
                   padding: 0px 20px;
                   margin-right: 20px;
                   background: snow;
                   border: 1px solid #ddd ;
                   i{
                    color: red;
                    margin-left: 20px;
                    font-size: 18px;
                   }
                }
            }
            .p_opt {
                margin-top: 10px;
                line-height: 28px;

                .p_haha {
                    display: flex;
                    margin-bottom: 13px;

                    dt {
                        margin-right: 15px;
                    }

                    dd {
                        padding: 2px 14px;
                        border-left: 1px #eee solid;
                        border-top: 1px #eee solid;
                        border-right: 1px #bbb solid;
                        border-bottom: 1px #bbb solid;
                        margin-right: 10px;
                        &:nth-of-type(1){
                            color: red;
                        }
                    }
                }

                .p_money {
                    display: flex;

                    .p_num {
                        width: 70px;
                        height: 40px;
                        position: relative;

                        input {
                            width: 46px;
                            height: 37px;
                        }

                        .aa1 {
                            width: 20px;
                            height: 19px;
                            border: 1px solid #dbd7d7;
                            display: block;
                            position: absolute;
                            top: 0;
                            right: 0;
                            line-height: 19px;
                            text-align: center;
                            font-size: 15px;
                        }

                        .aa2 {
                            width: 20px;
                            height: 19px;
                            border: 1px solid #dbd7d7;
                            display: block;
                            position: absolute;
                            bottom: 0;
                            right: 0;
                            line-height: 19px;
                            text-align: center;
                            font-size: 15px;
                        }

                        a {
                            color: #666;
                            background: #f1f1f1;
                        }

                        a:hover {
                            font-style: none;
                        }

                    }

                    .p_plus {
                        button {
                            padding: 0 25px;
                            height: 36px;
                            font-size: 16px;
                            background: #e1251b;
                            border: none;
                            color: white;
                            margin-left: 25px;
                        }
                    }
                }

            }

        }

    }
}

.main {
    .wh;
    margin: 30px auto 0;

    .portable {
        width: 210px;
        border: 1px solid #ccc;

        .class_e {
            display: flex;

            p {
                width: 105px;
                height: 40px;
                border: 1px solid #e5e2e2;
                line-height: 40px;
                text-align: center;
                box-sizing: border-box;


            }

            .active {
                border-top: 4px solid #e1251b;
                border-bottom: none;
            }
        }

        .class_s {
            margin: 10px;
            width: 190px;
            display: none;

            .ul_tr {
                .tr;

                li {
                    width: 50%;
                    line-height: 28px;
                    height: 28px;
                    border-bottom: 1px dashed #ededed;
                    font-size: 13px;
                }
            }

            .portable_money {
                width: 100%;

                ul {
                    li {
                        margin: 5px 0 15px;
                        border-bottom: 1px solid #ededed;

                        img {
                            width: 152px;
                        }

                        p {
                            &:nth-of-type(2) {
                                font-size: 16px;
                                color: #c81623;
                            }

                            &:nth-of-type(3) {
                                text-align: center;
                                padding-bottom: 5px;

                                a {
                                    display: block;
                                    margin: 5px 0;
                                    border: 1px solid #8c8c8c;
                                    color: #8c8c8c;
                                    padding: 2px 14px;
                                    width: 80px;
                                    margin: auto;
                                }
                            }
                        }
                    }
                }
            }
        }
        .yinBox{
            display: none;
        }
        .show{
            display: block;
        }
    }

    .spareRight {
        width: 980px;

        .spare_part {
            border: 1px solid #ddd;
            margin-bottom: 15px;

            .spare_p {
                border: 1px solid #ddd;
                padding: 5px 0 5px 15px;
                background: #f1f1f1;
            }

            .checked {
                height: 170px;
                width: 100%;
                padding-top: 10px;

                .goodsBox {
                    width: 127px;
                    height: 165px;
                    position: relative;
                    text-align: center;
                    float: left;

                    img {
                        width: 87px;
                        margin: auto;
                    }

                    .priceTag {
                        color: c81623;
                        font-size: 16px;

                    }

                    i {
                        position: absolute;
                        top: 48px;
                        right: -25px;
                        font-size: 16px;
                    }
                }

                .chooseBoxList {
                    width: 668px;
                    height: 165px;
                    text-align: center;

                    li {
                        width: 127px;
                        margin: 0px 20px;

                        img {
                            width: 120px;
                            height: 130px;
                        }

                        float: left;
                    }

                    float: left;
                }

                .chooseBoxRight {
                    border-left: 1px solid #ddd;
                    width: 153px;
                    height: 165px;
                    float: left;
                    padding-left: 20px;

                    p {
                        &:nth-child(1) {
                            margin: 10px 0px;
                        }

                        &:nth-child(2) {
                            font-weight: 800;
                            margin-bottom: 10px;
                        }

                        &:nth-child(3) {
                            color: #B1191A;
                            font-size: 16px;
                            margin-bottom: 10px;
                        }
                    }

                    button {
                        padding: 10px 25px;
                        font-size: 16px;
                        color: white;
                        background-color: #e1251b;
                        border: none;
                    }
                }
            }
        }

        .goodsIntroduce {
            width: 980px;

            .goodsTab {
                background: #ededed;


                &::after {
                    clear: both;
                    content: '';
                    display: block;
                }

                ul {
                    li {
                        height: 40px;
                        background: #fff;
                        border: 1px solid #ddd;
                        padding: 0px 11px;
                        float: left;

                        a {
                            margin: 10px 0px;
                            display: block;

                        }
                    }
                    
                    .active {

                        background: #e1251b;

                        a {
                            color: white;
                        }
                    }
                }
            }
            .box_list{
                li{
                    display: none;
                }
                .show{
                    display: block;
                }

            }
        }
    }

}

body {
    position: relative;
}

.rightTab {
    width: 300px;
    height: 100%;
    position: fixed;
    top: 0px;
    z-index: 3;


    .clickRight {
        width: 35px;
        height: 35px;
        background: #7a6e6e;
        position: absolute;
        top: 0px;
        left: -35px;
        background-size: 35px 35px;
    }

    .line {
        background-image: url(../images/list.png);
    }

    .cross {
        background-image: url(../images/cross.png);
    }

    .clickRightContent {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border-left: 3px solid #7a6e6e;
        background: bisque;
        z-index: 2;
    }

    .hoverTab {
        position: absolute;
        left: -35px;
        top: 30%;

        li {
            background: #7a6e6e;

            &:nth-child(1) {
                p {
                    width: 35px;
                    height: 35px;
                    background-image: url(../images/toolbars.png);
                    background-position: -87px -174px;
                    transition: .5s;
                }
                &:hover i{
                    background-color: pink;
                    left: -62px;
                }
                &:hover p{
                    background-color: pink;
                }

                i {
                    width: 62px;
                    height: 35px;
                    line-height: 35px;
                    text-align: center;
                    position: absolute;
                    top: 0;
                    left: 35px;
                    background-color: #7a6e6e;
                    transition: .5s;
                    z-index: -2;
                }


            }

            &:nth-child(2) {
                p {
                    width: 35px;
                    height: 35px;
                    background-image: url(../images/toolbars.png);
                    background-position: -87px -174px;
                    transition: .5s;
                }
                i {
                    width: 62px;
                    height: 35px;
                    line-height: 35px;
                    text-align: center;
                    position: absolute;
                    top: 35px;
                    left: 35px;
                    background-color: #7a6e6e;
                    transition: .5s;
                    z-index: -2;
                }
                &:hover i{
                    background-color: pink;
                    left: -62px;
                }
                &:hover p{
                    background-color: pink;
                }
            }

            &:nth-child(3) {
                p {
                    width: 35px;
                    height: 35px;
                    background-image: url(../images/toolbars.png);
                    background-position: -87px -174px;
                    transition: .5s;
                }
                i {
                    width: 62px;
                    height: 35px;
                    line-height: 35px;
                    text-align: center;
                    position: absolute;
                    top: 70px;
                    left: 35px;
                    background-color: #7a6e6e;
                    transition: .5s;
                    z-index: -2;
                }
                &:hover i{
                    background-color: pink;
                    left: -62px;
                }
                &:hover p{
                    background-color: pink;
                }
            }

            &:nth-child(4) {
                p {
                    width: 35px;
                    height: 35px;
                    background-image: url(../images/toolbars.png);
                    background-position: -87px -174px;
                    transition: .5s;
                }
                i {
                    width: 62px;
                    height: 35px;
                    line-height: 35px;
                    text-align: center;
                    position: absolute;
                    top: 105px;
                    left: 35px;
                    background-color: #7a6e6e;
                    transition: .5s;
                    z-index: -2;
                }
                &:hover i{
                    background-color: pink;
                    left: -62px;
                }
                &:hover p{
                    background-color: pink;
                }
            }

            &:nth-child(5) {
                p {
                    width: 35px;
                    height: 35px;
                    background-image: url(../images/toolbars.png);
                    background-position: -87px -174px;
                    transition: .5s;
                }
                i {
                    width: 62px;
                    height: 35px;
                    line-height: 35px;
                    text-align: center;
                    position: absolute;
                    top: 140px;
                    left: 35px;
                    background-color: #7a6e6e;
                    transition: .5s;
                    z-index: -2;
                }
                &:hover i{
                    background-color: pink;
                    left: -62px;
                }
                &:hover p{
                    background-color: pink;
                }
            }

            &:nth-child(6) {
                p {
                    width: 35px;
                    height: 35px;
                    background-image: url(../images/toolbars.png);
                    background-position: -87px -174px;
                    transition: .5s;
                }
                i {
                    width: 62px;
                    height: 35px;
                    line-height: 35px;
                    text-align: center;
                    position: absolute;
                    top: 175px;
                    left: 35px;
                    background-color: #7a6e6e;
                    transition: .5s;
                    z-index: -2;
                }
                &:hover i{
                    background-color: pink;
                    left: -62px;
                }
                &:hover p{
                    background-color: pink;
                }
            }
        }
    }
}

.appearClose {
    right: -297px;
}

.appearOpen {
    right: 0px;
}